<template>
    <div class="mark-policy">
        <!-- 1.左侧tree -->
        <div class="word-tree" v-if="treeData.length">
            <el-tree :data="treeData" :props="defaultProps" :highlight-current=true ref="tree"
               @node-click="handleNodeClick"></el-tree>
        </div>


        <div class="rightDiv">

            <!-- 2.1.当前节点信息: 节点, 关键词列表 -->
            <div class="cur_nodeinfo" v-show="curNode.id">
                <div>当前选择框架: {{curNode.label}}</div>
                <div>
                    <el-tag :key="key" v-for="(tag, key) in policy_words" closable :disable-transitions="false" @close="tagDel(key)">
                        {{tag.keyword}}
                    </el-tag>
                </div>

                <div v-if="addTagForm_isshow" class="addTagForm">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <el-input class="input-new-tag" v-model="addTagForm_tagname" size="small" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="button-new-tag" size="small" @click="addTagForm_submit">提交</el-button>
                            <el-button class="button-new-tag" size="small" @click="addTagForm_hide()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="!addTagForm_isshow"  class="addTagForm">
                    <el-button class="button-new-tag" size="small" @click="addTagForm_show()">+ 新增关键词</el-button>
                </div>

            </div>


            <!-- 2.2.搜索及结果 -->
            <div class="search-area" v-show="curStep=='2search'">
                <div class="search">
                    <el-input size="small" v-model="searchInput" placeholder="请输入内容"></el-input>
                    <el-button size="mini" @click="handleSearch()">搜索政策</el-button>
                </div>

<!--
                <div class="keywords-area" v-if="isKeyArea">
                    <el-collapse  v-model="collapse_activeNames">
                        <el-collapse-item title="相关的关键词" name="1">
                            <div>
                                <el-checkbox-group v-model="checkKeyList" class="checkbox">
                                    <el-checkbox :label="key" v-for="(key,index) in keyList" :key="index" style="margin-bottom: 5px"></el-checkbox>
                                </el-checkbox-group>
                                <el-button size="mini" @click="handleSearchByKey()">搜索</el-button>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
-->


                <div class="table-area" v-if="isTable">
                    <el-table v-loading="listLoading" :data="tableList" border class="table" >
                        <el-table-column label="ID" prop="id" width="50"></el-table-column>
                        <!--<el-table-column label="政策标识符" prop="keyword" width="60"></el-table-column>-->
                        <!--<el-table-column label="政策标题" prop="title" width="80"></el-table-column>-->
                        <el-table-column label="政策标题" prop="title" width="280"></el-table-column>
                        <el-table-column label="发文字号" prop="number" width="80"></el-table-column>
                        <el-table-column label="发布机构" prop="publishOrgan" width="80"></el-table-column>
                        <el-table-column label="发布日期" prop="publishDate" width="80"></el-table-column>
<!--
                        <el-table-column label="获取网址" prop="url" width="80"></el-table-column>
                        <el-table-column label="全文" prop="content" width="150"></el-table-column>
                        <el-table-column label="主题分类" prop="createDate" width="80">
                            <template slot-scope="scope">
                                <span v-for="word in scope.row.wordFreamList" style="margin-right: 4px">{{word}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="关键词" prop="keyword" width="80"></el-table-column>
-->
                        <el-table-column label="有效性" prop="validity" width="50"></el-table-column>
                        <el-table-column label="执行截止日期" prop="endDate" width="100"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="btn_markClick(scope.row.id)" type="text" size="small">标引</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination"  v-if="isTable">
                    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handlePage"/>
                </div>
            </div>


            <!-- 2.3.政策详情及标引 -->
            <div class="detailArea" v-show="curStep=='3detail'">
                <!--<el-button size="mini" @click="submitWords()">提交关键词</el-button>-->
                <el-button @click="detailArea_back()" type="text" size="small">返回列表</el-button>
                <div  @mouseup="detailArea_getSelectText()"  v-html="policy_cnt">
                </div>
            </div>


        </div><!-- rightDiv -->

    </div>

</template>

<script>
import {getWordsTree} from "@/api/words-fream-tree";
import {searchKeyByEx, searchArticle} from "@/api/mark-policy";
import {getPolicyById} from "@/api/policy-edit";
import {addWord, delWord, getWordsList} from "@/api/word-manage-list";

import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
    name: "mark-policy",
    components: {Pagination},
    data() {
        return {
            curStep: '2search',     // 2search,3detail

            treeData:[],
            curNode:{ id:0, label:''  },

            tableList: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 10
            },
            listLoading: false,
            isKeyArea: false,
            isTable: false,
            data: [],
            keyList: [],
            checkKeyList: [],
            searchInput: '',
            defaultProps: {
              //children: 'childWordFream',
              children: 'children',
              label: 'name'
            },

            collapse_activeNames: ['1'],


            // 添加新关键词
            addTagForm_isshow : false,
            addTagForm_tagname: '',

            // 政策详情及标引
            policy_cnt:'',
            policy_words:[],        // [{id:1, keyword:'xx', /*wordFreamId:curNodeId*/}]
        }
    },
    created() {
        this.getWordsTree();
    },
    methods: {
        getWordsTree() {
            //return;    // 1217.关键词不和框架绑定了。 这里不显示框架

            this.listLoading = true;
            getWordsTree().then(res => {
                this.treeData = res.result;
                this.listLoading = false;
            });
        },
        handleNodeClick(data) {
            console.log(data);      
            this.curNode = data;        // id:2, label:"xxx", level:2
            //this.getWordsList();
            //console.log(this.$refs.tree.getCurrentNode());
        },
        getWordsList(){
            this.policy_words = [];
            if( this.curNode.id ){
                let param = { wordFreamId: this.curNode.id, pageSize:100}
                getWordsList(param).then(res => {
                    console.log('[getWordsList]' , res.result.list);
                    // {id:1, keyword:'xx'}
                    this.policy_words = res.result.list;
                })
            }
        },

        tagAdd(str){
            if( str ){
                let param={
                    //"id": 1,
                    "keyword": str,
                    //"wordFreamId": this.curNode.id
                }
                addWord(param).then(res => {
                    console.log('[tagAdd]' ,res);
                    this.policy_words.push( {id:res.result.id, keyword:str} )
                    this.$message({ message: '添加成功！', type: 'success' })
                })
            }
        },
        tagDel(key){
            console.log('tagDel', key, arguments);
            console.log('[tagDel]', key, this.policy_words);

            this.$confirm("确定删除?", {type: "warning"}).then(() => {
                let param={id: this.policy_words[key].id }
                delWord(param).then(res => {
                    console.log('[tagDel]res: ' ,res);
                    this.policy_words.splice(key, 1)
                    this.$message({ message: '删除成功！', type: 'success' })
                })
            }).catch(() => {})
        },


            /********** 添加新关键词的表单 **********/
        addTagForm_show(){
            this.addTagForm_tagname = '';
            this.addTagForm_isshow = true;
        },
        addTagForm_hide(){
            this.addTagForm_isshow = false;
        },
        addTagForm_submit(){
            let str = this.addTagForm_tagname.trim();
            if( str ){
                this.addTagForm_hide();
                this.tagAdd( str );
            }
        },


/*
          // 搜索关键词
        handleSearch() {
            console.log('curNode: ', this.$refs.tree.getCurrentNode());
            let param = {
                key: this.searchInput,
                pageSize: 100
            }
            this.listLoading = true;
            searchKeyByEx(param).then(res => {
                this.keyList = res.result;
                this.listLoading = false;
                this.isKeyArea = true;
            })
        },
          // 搜索政策
        handleSearchByKey() {
            const searchKeys = this.checkKeyList.join('&');
            let param = {
                pageSize: this.listQuery.limit,
                pageNum: this.listQuery.page,
                key: searchKeys,
            };
            this.listLoading = true;
            searchArticle(param).then(res => {
                this.tableList = res.result.list;
                this.total = res.result.total;
                this.listLoading = false;
                this.isTable = true;
            })
        },
*/

          // 1217.直接搜索政策, 不要先搜索关键词了。
        handleSearch() {
            this.listQuery.page = 1;
            this.handlePage();
        },
        handlePage(){
            let param = {
                pageSize: this.listQuery.limit,
                pageNum: this.listQuery.page,
                key: this.searchInput,
            };
            this.listLoading = true;
            searchArticle(param).then(res => {
                this.tableList = res.result.list;
                this.total = res.result.total;
                this.listLoading = false;
                this.isTable = true;
            })
        },


        btn_markClick(id) {
            console.log('[markClick]'+id);
            getPolicyById({id:id}).then(res => {
                console.log(res);
                this.policy_cnt = res.result.content
                //this.policy_words = res.result.wordFreamList

                this.curStep = '3detail';
                //this.isTable=false;
            })
        },



        detailArea_getSelectText() {
            let str = window.getSelection().toString()
            if( str ){
                if(str.length<10){
                    this.tagAdd(str);
                }else{
                    this.$confirm("此关键词长度超过10个字符，您确定添加?", "提示", {
                        confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
                    }).then(() => {
                        this.tagAdd(str);
                    }).catch(() => {})
                }
            }
        },
        detailArea_back(){
            this.curStep = '2search';
        },


        submitWords(){
        },

    }
}
</script>

<style lang="less" scoped>
  .mark-policy {
    display: flex;

    .word-tree {
      width: 20%;
      margin-left: 0;
      border: 1px solid gray;
      padding: 20px;
      border-radius: 5px;
    }

    .rightDiv{
        width: 75%;
        padding-left: 48px;

        .el-tag{
            margin-right:5px; margin-top:5px;
        }

        .addTagForm{
            margin-top:5px;
        }

        .cur_nodeinfo{
            margin-top:10px;
        }

        .search-area {
            margin-top:10px;
            .search {
                width: 300px;
                display: flex;
                margin-bottom: 24px;
            }
        }

        .detailArea{
            margin-top:20px;
        }

    }





    .keywords-area {
      border: 1px solid gray;
      padding: 24px;

      .area-title {
        margin-bottom: 12px;
      }

      .checkbox {
        margin-bottom: 12px;

      }
    }

    .table-area {
      border: 1px solid gray;
      margin-top: 12px;
    }

  }
</style>
